<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="tabs" :style="{ top: navHeight }">
					<wd-tabs lineWidth="60" lineHeight="2" custom-class="wd-tabs-custom-class" v-model="currentTab"
						@change="tabsChange">
						<block v-for="item in tabs" :key="item">
							<wd-tab :title="item">
								<!-- <view class="content">{{ item }}</view> -->
							</wd-tab>
						</block>
					</wd-tabs>
				</view>
				<view class="list">
					<queryItem @orderOk="orderOk" @afterServiceInfo="afterServiceInfo" @afterService="afterService"
						@payService="payService" @deleteItem="deleteItem" v-for="(item, index) in dataList"
						:item="item"></queryItem>
				</view>
			</view>
		</wd-config-provider>
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue';

	import useRouter from '@/hooks/useRouter.ts';
	import useStatusHeight from '@/hooks/useStatusHeight';
	import usePage from './usePage';
	import queryItem from './../components/item';
	import { onShow } from '@dcloudio/uni-app';
	import { paymentImCase, userCaseFinishOrder } from "@/api/index"
	import WxPay from "@/libs/WxPay"
	export default defineComponent({
		name: 'MyCase',
		components: {
			queryItem
		},
		setup(props, ctx) {
			const router = useRouter();

			// 日间light、夜间dark主题
			const theme = ref('light');
			const statusHeight = useStatusHeight();
			const page = usePage();
			const firstLoad = ref(true); // 是否是第一次加载页面数据，用于初始化数据后自动刷新页面数据
			page.getData()
			onShow(() => {
				if (firstLoad.value) {
					page.getData()
				} else {
					page.reGetData();
				}
			})
			const deleteItem = (item : any) => {
				uni.$wdToast.confirm("确定需要删除当前咨询订单吗", "提示").then((res : any) => {
					// doAskOrderDel({
					// 	ask_order_id: item.id
					// }).then(res => {
					// 	uni.$wdToast.show("删除成功")
					// 	page.reGetData();
					// })
				});
			}
			const afterService = (item : any) => {
				uni.$wdToast.confirm("是否申请售后", "提示").then((res : any) => {
					router.push({
						url: "/commonPage/afterSaleService/afterSaleService",
						params: {
							id: item.id,
							type: 'caseOrder'
						}
					})
				});
			}
			const afterServiceInfo = (item : any) => {
				router.push({
					url: "/commonPage/afterSaleService/afterSalesProgress",
					params: {
						id: item.id,
						type: 'caseOrder'
					}
				})
			}
			const payService = (item : any) => {
				if (item.order_type === 0) {
					uni.$wdToast.confirm("确定支付当前案件费用吗", "提示").then((res : any) => {
						let wxPay = new WxPay();
						wxPay.pay({
							orderId: item.id,
							type: 2
						}, {
							fail: () => {
								uni.$wdToast.show("取消支付")
							},
							getOrderCb: () => {
								uni.$wdToast.show("支付成功")
								page.reGetData();
							}
						})
						// paymentImCase({
						// 	anjian_order_id: item.id,
						// }).then((res : any) => {
						// 	uni.$wdToast.show("支付成功")
						// 	page.reGetData();
						// });
					});
				} else {
					router.push({
						url: "/commonPage/imCasePerfect/imCasePerfect",
						params: {
							orderId: item.id,

						}
					})
				}
			}
			const orderOk = (item) => {
				uni.$wdToast.confirm("确定完成该订单吗", "提示").then((res : any) => {
					userCaseFinishOrder({
						anjian_order_id: item.id,
					}).then(res => {
						uni.$wdToast.show("当前订单已完成")
						page.reGetData();
					})
				});
			}
			return {
				theme,
				navHeight: 0,
				deleteItem,
				afterService,
				afterServiceInfo,
				payService,
				orderOk,
				...page
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #f2f2f2;
	}

	.container {
		position: relative;
		padding-top: 84rpx; // 设置tabs的高度，根据实际高度调整

		.tabs {
			position: fixed;
			width: 100%;
			height: 84rpx;
			top: 0;
			z-index: 2;

			:deep(.wd-tabs__nav) {
				height: 84rpx;
				line-height: 84rpx;

				.wd-tabs__nav-container {
					height: 84rpx;
					line-height: 84rpx;

					.wd-tabs__nav-item {
						height: 84rpx;
					}
				}
			}
		}

		.list {
			padding: 0 24rpx 24rpx;
		}
	}
</style>